import React, { useRef, useState, useEffect } from 'react';
// styles
import styles from './index.less';
// 自定义组件
// 自定义工具和方法
import { transData } from './transData';

export default () => {
  const [polylineArr, setPolylineArr] = useState([
    {
      name: '123123',
      positions: [
        [11, 118],
        [13, 118],
        [10, 118],
      ],
      color: '#6bffff',
    },
    {
      name: '123123',
      positions: [
        [12, 119],
        [12.3, 108],
        [12, 138],
        [11, 128],
      ],
      color: '#ff0000',
    },
    {
      name: '123123',
      positions: [
        [14, 118],
        [13.2, 128],
        [13.1, 108],
      ],
      color: '#360200',
    },
  ]);
  // 清除图层
  const clearFun = () => {
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'clearLayer',
              groupId: 'MapGroup',
              layerId: 'polylineLayer',
            },
          ],
        },
      ],
      () => {
        // console.log('清除完成了');?
      },
    );
  };
  // 绘制图层
  const drawFun = () => {
    let drawData = transData(polylineArr);
    console.log('drawData', drawData);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'draw',
          payload: [
            {
              groupId: 'MapGroup',
              layerId: 'polylineLayer',
              payload: drawData,
            },
          ],
        },
      ],
      () => {
        // console.log('绘制完成了');
      },
    );
  };
  useEffect(() => {
    // console.log('viewer', window.LFTViewer);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'createLayer',
              groupId: 'MapGroup',
              layerId: 'polylineLayer',
            },
          ],
        },
      ],
      () => {
        // console.log('创建完成了');
        drawFun();
      },
    );
    return () => {
      clearFun();
    };
  }, []);
  return <></>;
};
